<template>
  <view>
    <view class="top">
      <view class="nav">
        <text class="iconfont icon-xiangzuo" @click="back"></text>
        <text>职位搜索</text>
      </view>
      <view class="search">
        <view @click="test">{{city}}<text class="iconfont icon-xia" /></view>
        <input type="text" v-model="value" confirm-hold focus placeholder="搜索职位名称" @input="inputTxt"
          placeholder-class='placeholder' />
      </view>
    </view>
    <view class="history" v-if="record.length&&!list.length">
      <view class="title">历史搜索</view>
      <view class="record">
        <view class="item" v-for="(item,i) in record" :key='i'>{{item}}</view>
      </view>
    </view>
    <view class="list">
      <view class="item" v-for="item in list" v-html="item.name" :key='item.id'
        @click="listClick(item)"></view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        record: [],
        value: '',
        list: [],
        city:'',
		currentPage: 1,
		pageSize: 10,
        FUNC:() =>{}
      }
    },
    onLoad() {
      // uni.getLocation({
      //   type:"gcj02",
      //   geocode:true,
      //   success:res => {
      //     let cityArr = res.address.city.split("")
      //     // #ifdef APP-PLUS
      //     if(cityArr.reverse()[0]=="市") {
      //       cityArr.shift()
      //     }
      //     this.city=cityArr.reverse().join('')
      //     // #endif
      //   }
      // })
      // this.FUNC=this.antiShake()
    },
	onShow() {
		
	},
    methods: {
      back() {
        uni.navigateBack()
      },
      test() {
        console.log(this.$store.state)
      },
      antiShake() {
        let timer
        return (callBack) => {
          clearTimeout(timer)
          timer=setTimeout(callBack,500)
        }
      },
      inputTxt() {
		this.$api.jobList({
			page:this.currentPage,
			name: '',
			pageSize: this.pageSize,
			typeId: ''
		}).then(res => {
			if (res.code === 200) {
			  let reg = new RegExp(this.value, 'g')
			  if (!this.value) return this.list = []
			  res.data.rows.map((item, i) => {
			    if (res.data.rows[i]) {
			      res.data.rows[i].name = item.name.replace("<font class='color'>", '').replace(
			        "</font>", '')
			    }
			  })
			  res.data.rows.map((item, i) => {
			    let reg = new RegExp(this.value, 'g')
			    // let str = '<text>' + value + '</text>'
			    let str = this.value;
			    if (res.data.rows[i]) {
			      res.data.rows[i].name = item.name.replace(reg, str)
			    }
			    this.list = res.data.rows
			  })
			  // this.list = res.data.rows
			}
		})
      },
      listClick(item) {
		uni.reLaunch({
			// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
			url: "/pages/index/index?searchName=" + item.name
		})
      }
    }
  }
</script>

<style lang="scss">
  .top {
    width: 750rpx;
    padding-top: 58rpx;
    height: 170rpx;
    border-bottom: 1px solid #f5f5f5;

    .nav {
      width: 690rpx;
      padding: 0 30rpx;
      height: 84rpx;
      line-height: 84rpx;

      text {
        margin-right: 30rpx;
        font-size: 36rpx;
      }
    }

    .search {
      width: 640rpx;
      height: 66rpx;
      border-radius: 34rpx;
      margin: auto;
      margin-top: 10rpx;
      padding-left: 30rpx;
      background: #f5f5f5;
      display: flex;
      align-items: center;

      view {
        font-size: 28rpx;
        height: 22rpx;
        color: #666;
        line-height: 22rpx;
        border-right: 3rpx solid $uni-text-color-placeholder;
        margin-right: 10rpx;

        .icon-xia {
          padding: 0 10rpx;
        }
      }

      .placeholder {
        font-size: 28rpx;
      }

      input {
        font-size: 30rpx;
        color: #666;
      }
    }
  }

  .history {
    width: 680rpx;
    padding: 50rpx 35rpx 0;

    .title {
      font-size: 36rpx;
      font-weight: bold;
    }

    .record {
      padding-top: 30rpx;
      font-size: 28rpx;
      display: flex;
      flex-wrap: wrap;

      .item {
        padding: 10rpx 20rpx;
        background: #F6F6F6;
        border-radius: 6rpx;
        margin: 0 20rpx 20rpx 0;
      }
    }
  }

  .list {
    width: 680rpx;
    padding: 0 35rpx;

    .item {
      width: 680rpx;
      height: 100rpx;
      line-height: 100rpx;
      border-bottom: 1rpx solid #F2F2F2;
      font-size: 30rpx;

      .color {
        color: $uni-color-primary;
      }
    }
  }
</style>
